<template>
  <div class="chart-content" ref="chart"></div>
</template>

<script>
import * as echarts from 'echarts'
import { getAction } from '@/api/manage'

export default {
  name: 'TransportCapacityTrendChart',
  data() {
    return {
      echartsInstance: null,
      percents: [
        {
          city: '青岛',
          percent: '32.8%'
        },
        {
          city: '日照',
          percent: '32.8%'
        },
        {
          city: '烟台',
          percent: '32.8%'
        }
      ]
    }
  },
  mounted() {
    this.getChartData()
  },
  beforeDestroy() {
    if (!this.echartsInstance) {
      return
    }
    this.echartsInstance.dispose()
    this.echartsInstance = null
  },
  methods: {
    async getChartData() {
      const res = await getAction(
        '/topic/data/listAllBySql/dy_ydd_jtys_dfjtys_gk',
        { lb: '对比全省三大港口占比' }
      )
      if (res.success) {
        const percents = res.result.map(item => ({
          city: item.xm,
          percent: +item.sz
        }))
        const total = res.result.reduce((acc, item) => acc + +item.sz, 0)
        const rest = 100 - total
        percents.push({ city: '其他', percent: rest })
        this.initEcharts(percents)
      }
    },
    async initEcharts(percents) {
      if (!this.echartsInstance) {
        this.echartsInstance = echarts.init(this.$refs.chart)
      }

      const echartsOption = {
        xAxis: {
          type: 'value',
          data: ['received', 'accountsReceivable'],
          show: false
        },
        yAxis: {
          type: 'category',
          show: false
        },
        grid: {
          right: 0,
          left: 0
        },
        legend: {
          show: true,
          bottom: 0,
          left: 0,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 12,
            color: '#ffffff',
            rich: {
              percent: {
                color: 'hsla(0, 100%, 62%, 1)',
                fontWeight: 'bold'
              }
            }
          },
          formatter: name => {
            const percent = percents.find(item => item.city === name)
            if (!percent) return
            return `${name} {percent|${percent.percent}%}`
          },
          data: [percents[0].city, percents[1].city, percents[2].city]
        },
        tooltip: {
          show: false
        },
        series: [
          {
            name: percents[0].city,
            type: 'bar',
            stack: '总量',
            data: [percents[0].percent],
            barWidth: 10,
            itemStyle: {
              color: 'hsla(209, 79%, 65%, 1)',
              borderRadius: 0
            }
          },
          {
            name: percents[1].city,
            type: 'bar',
            stack: '总量',
            barWidth: 10,
            data: [percents[1].percent],
            itemStyle: {
              color: 'hsla(150, 60%, 64%, 1)',
              borderRadius: 0
            }
          },
          {
            name: percents[2].city,
            type: 'bar',
            stack: '总量',
            barWidth: 10,
            data: [percents[2].percent],
            itemStyle: {
              color: 'hsla(40, 80%, 61%, 1)',
              borderRadius: 0
            }
          },
          {
            name: percents[3].city,
            type: 'bar',
            stack: '总量',
            barWidth: 10,
            data: [percents[3].percent],
            itemStyle: {
              color: 'hsla(0, 0%, 100%, 0.25)',
              borderRadius: 0
            }
          }
        ]
      }

      this.echartsInstance.setOption(echartsOption)
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-content {
  width: 100%;
  height: 45px;
}
</style>
